<template>
	<view class="image flex flex--row">
	<!-- 	<navBar></navBar> -->
		<!-- 内容 -->
		<view class="image_box flex flex--row flex--align-items--center">
			<template v-if="isShowPage">
				<!-- 填写基本信息 标题 -->
				<view class="image_box_title flex flex--align-items--center flex--justify-content--center">
					<image src="../../static/image/notice.png" mode="" />
					上传您的身份证照片
				</view>
				<!-- 相册 -->
				<view class="image_album">
					<view class="index_box_title">身份证照片</view>
					<view class="image_album_box flex flex--wrap">
						<view
							class="image_album_box_list"
							@click="uploadImage('front_view')"
							style="width:292rpx;"
						>
							<text v-if="front_view == ''">身份证正面照片</text>
							<image v-else :src="front_view" mode="aspectFit"></image>
						</view>
						<view
							class="image_album_box_list"
							@click="uploadImage('back_view')"
							style="width:292rpx;"
						>
							<text v-if="back_view == ''">身份证反面照片</text>
							<image v-else :src="back_view" mode="aspectFit"></image>
						</view>
<!-- 						<view
							class="image_album_box_list"
							@click="uploadImage('handset_view')"
							style="width:292rpx;"
						>
							<text v-if="handset_view == ''">手持身份证照片</text>
							<image v-else :src="handset_view" mode="aspectFit"></image>
						</view> -->
					</view>
				</view>
			</template>
		
			
			<!-- 填写基本信息 标题 -->
		<!-- 	<view class="image_box_title flex flex--align-items--center flex--justify-content--center">
				<image src="../../static/image/notice.png" mode="" />
				上传健康证图片
			</view>
			<view class="image_album">
				<view class="index_box_title">健康证照片</view>
				<view class="image_album_box flex flex--wrap">
					<view
						class="image_album_box_list"
						@click="uploadImage('health_view')"
						style="width:292rpx;"
					>
						<text v-if="health_view == ''">健康证电子档</text>
						<image v-else :src="health_view" mode="aspectFit"></image>
					</view>
				</view>
			</view> -->
			
			
			<!-- 填写基本信息 标题 -->
			<view class="image_box_title flex flex--align-items--center flex--justify-content--center">
				<image src="../../static/image/notice.png" mode="" />
				上传您的生活靓照
			</view>
			<!-- 相册 -->
			<view class="image_album">
				<view class="index_box_title">相册</view>
				<view class="image_album_box flex flex--wrap">
					<view
						class="image_album_box_list"
						v-for="(item,index) in imageList"
						:key="index"
						@click="uploadImage(index)"
					>
						<text v-if="item == ''">添加图片</text>
						<image v-else :src="item" mode="aspectFit"></image>
					</view>
				</view>
				<view class="image_album_tip">* 请小可爱们务必上传本人照片哦～（网图等不予通过）</view>
			</view>
			<!-- 手机号 -->
			<view class="image_mobile">
				<view class="index_box_title">手机号</view>
				<input
					class="image_mobile_phone"
					type="number"
					maxlength="11"
					placeholder="输入手机号码"
					placeholder-style="color: #000;"
					v-model="phone"
				/>
				<!-- <view class="image_code flex flex--align-items--center flex--justify-content--space-between">
					<input
						type="text"
						placeholder="填写验证码"
						placeholder-style="color: #000;"
						v-model="code"
					/>
					<view v-if="!timeShow" class="image_code_get" @click="getCode">获取验证码</view>
					<view v-else class="image_code_get">{{ time }}s</view>
				</view> -->
			</view>
			<!-- 操作 -->
			<view class="image_open flex flex--align-items--center flex--justify-content--space-between">
				<view class="image_open_left" @click="returnPrev">上一步</view>
				<view class="image_open_right" @click="setSubmit">提交</view>
			</view>
		</view>
		<!-- 弹出框1 提交审核 -->
		<view
			class="image_one flex flex--row flex--align-items--center flex--justify-content--center"
			v-if="submitShow"
		>
			<view class="image_one_list">
				已经提交审核，审核结果将在<text>24小时</text>后，
			</view>
			<view class="image_one_list">
				以<text>短信的形式</text>通知到你哈~
			</view>
			<view class="image_one_btn" @click="submitShowFalse">好的</view>
		</view>
		<!-- 弹出框2 审核未通过 -->
		<view
			class="image_one flex flex--row flex--align-items--center flex--justify-content--center"
			v-if="false"
		>
			<view class="image_one_list">
				您的审核<text>未通过</text>
			</view>
			<view class="image_one_list">
				不通过原因：<text>使用网图/图片不清晰</text>
			</view>
			<view class="image_one_btn">重新修改</view>
		</view>
		
		<!-- 图片进度条 -->
		<view class="modalWrapper" v-if="uS.uploadStatus">
			<view class="modalWrapper_content">
				<progress class="select-tips" :percent="uS.schedule" stroke-width="4" activeColor="#FA97B4" />
				<view class="tips-text">
					上传进度{{uS.schedule}}%
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				params: null,
				time: 60,
				timer: null,
				timeShow: false,
				imageList: ['','','','','',''],
				phone: '',
				code: '',
				submitShow: false,
				front_view:"",
				back_view:"",
				// handset_view:"",
				health_view:"",
				isShowPage:null,
				uS:{
					schedule:0,
					uploadStatus:false
				}
			}
		},
		onLoad(option) {
			this.params = JSON.parse(option.data)
			this.getAlbum();
			this.getIsShowHandIdcode()
		},
		computed: {
			...mapState(['baseUrl'])
		},
		methods: {
			async getIsShowHandIdcode(){
				const data = await this.$http('/appapi/member/is_show_hand_idcode')
				console.log("======================================================")
				console.log(data)
				console.log("======================================================")
				this.isShowPage=data
			},
			// 上传图片
			uploadImage(index) {
				let that = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						that.uS.uploadStatus=true
						const uploadTask = uni.uploadFile({
							url: that.baseUrl + '/appapi/member/upload?token=' + uni.getStorageSync(
								"token") + "&index=" + index,
							filePath: res.tempFilePaths[0],
							name: 'images',
							success(data) {
								console.log(data);
								let arr = JSON.parse(data.data)
								if (index == 'front_view' || index == 'back_view' || index ==
									'handset_view' || index == 'health_view') {
									that[index] = arr.data;
								} else {
									that.$set(that.imageList, index, arr.data)
								}
					
								that.getAlbum()
							}
						})
					
						uploadTask.onProgressUpdate((res) => {
							console.log('上传进度' + res.progress);
							
							console.log('已经上传的数据长度' + res.totalBytesSent);
							console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
							// item.schedule = res.progress;
							that.uS.schedule=res.progress
							if (res.progress == 100) {
								//item.uploadStatus = true;
								console.log("已经上次完成")
								that.uS.uploadStatus=false
							}
							// 测试条件，取消上传任务。
							// if (res.progress > 50000) {
							// 	uploadTask.abort();
							// }
						});
					}
				})
			},
			// 上一步 
			returnPrev() {
				uni.navigateBack({
					delta: 1
				})
			},
			//获取相册
			async getAlbum(){
				let that = this;
				const data = await this.$http('/appapi/member/getAlbum', {
					token: uni.getStorageSync("token")
				})
				console.log(data); 
				this.imageList = data.imgArr;
				this.front_view = data.front_view;
				this.back_view = data.back_view;
				// this.handset_view = data.handset_view;
				this.health_view=data.health_view
			},
			// 获取验证码
			async getCode() {
				if(/^1[34578]\d{9}$/.test(this.phone)){
					const res = await this.$http('/appapi/member/get_code', {
						mobile: this.phone
					})
					uni.showToast({
						title: '获取成功',
						icon: 'none'
					})
					this.timeShow = true
					this.timer = setInterval(() => {
						--this.time
						this.timeShow = true
					},1000)
					setTimeout(() => {
						clearInterval(this.timer)
						this.time = 60
						this.timeShow = false
					}, 60000)
				}else {
					uni.showToast({
						title: '手机号错误',
						icon: 'none'
					})
				}
			},
			// 提交
			async setSubmit() {
				let that = this
				let images = ''
				images = this.imageList.join(',')
				// console.log(images)
				if(!images){
					uni.showToast({
						title: '请选择图片',
						icon: 'none'
					})
					return
				}
				if(!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				// if(!this.health_view){
				// 	uni.showToast({
				// 		title: '请提交健康证',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				
				// if(!this.code) {
				// 	uni.showToast({
				// 		title: '请输入验证码',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				this.params.images = images
				this.params.mobile = this.phone
				this.params.code = this.code
				
				this.$store.commit('setApplyData',this.params)
				const { data,status, msg } = await this.$http('/appapi/member/apply',this.params)
				if(status) {
					uni.showToast({
						title: '提交成功',
						icon: 'none',
						success() {
							that.submitShow = true
						}
					})
				}else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
			submitShowFalse(){
				this.submitShow = false
				uni.reLaunch({
					url: '/pages/tabBar/tabBar'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.index_box_title {
		width: 186rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background: #F8C4D4;
		font-size: 28rpx;
		border-radius: 10rpx;
		color: #fff;
		margin: 30rpx 0;
	}
	
	.image {
		height: 100%;
		.image_box {
			flex: 1;
			overflow: auto;
			padding: 34rpx 22rpx 0 22rpx;
			.image_box_title {
				width: 392rpx;
				height: 94rpx;
				background: #FDFDFD;
				border: 6rpx solid #F3F3F3;
				font-size: 28rpx;
				color: #FF4E4E;
				margin-bottom: 28rpx;
				flex-shrink: 0;
				image {
					width: 80rpx;
					height: 46rpx;
					margin-right: 48rpx;
				}
			}
			.image_album {
				width: 100%;
				.image_album_box {
					padding: 44rpx;
					background: #F8F8F8;
					.image_album_box_list {
						width: 194rpx;
						height: 274rpx;
						line-height: 274rpx;
						text-align: center;
						border: 1px solid #E9E9E9;
						margin: 12rpx 12rpx 0 0;
						font-size: 28rpx;
						&:nth-child(3n+3) {
							margin-right: 0;
						}
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
				.image_album_tip {
					text-align: center;
					margin-top: 24rpx;
					font-size: 20rpx;
					color: #FA97B4;
				}
			}
			.image_mobile {
				width: 100%;
				.image_mobile_phone {
					width: 100%;
					height: 88rpx;
					text-align: center;
					background: #F8F8F8;
					font-size: 28rpx;
				}
				.image_code {
					margin-top: 18rpx;
					input {
						width: 496rpx;
						height: 88rpx;
						text-align: center;
						background: #F8F8F8;
						font-size: 28rpx;
					}
					.image_code_get {
						width: 196rpx;
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						background: #F8F8F8;
						font-size: 28rpx;
						color: #FA97B4;
					}
				}
			}
			.image_open {
				width: 100%;
				margin: 38rpx 0 130rpx 0;
				view {
					width: 334rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border-radius: 40rpx;
					font-size: 32rpx;
					color: #fff;
				}
				.image_open_left {
					background: #afafaf;
				}
				.image_open_right {
					background: #FA97B4;
				}
			}
		}
		.image_one {
			padding: 110rpx 0 62rpx 0;
			background: #FFF;
			box-shadow: 0 -8rpx 144rpx -26rpx rgba(0,0,0,0.50);
			border-radius: 50rpx 50rpx 0 0;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 2;
			.image_one_list {
				font-size: 28rpx;
				font-weight: bold;
				text {
					color: #FA97B4;
				}
			}
			.image_one_btn {
				width: 334rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #000;
				border-radius: 40rpx;
				font-size: 32rpx;
				color: #fff;
				margin-top: 64rpx;
			}
		}
	}
	
	// 模态框样式
	.modalWrapper {
		width: 100vw;
		position: fixed;
		top: 0;
		background-color: rgba(162,162,160,.5);
		height: 100vh;
		z-index: 200;
		left: 0;
		display: flex;
		box-sizing: border-box;
	}
	
	.modalWrapper_content {
		width: 82%;
		box-sizing: border-box;
		border-radius: 30rpx;
		padding: 30rpx;
		margin: auto;
	}
	
	.modalWrapper_title {
		text-align: center;
		display: flex;
		position: relative;
		margin: 15rpx 0;
	}
	.tips-text{
		font-size: 24rpx;
		color: #FA97B4;
	}
</style>
